<template>
  <div class="house-deatil">
    <h3>{{house.title}}</h3>
    <div class="tags">
      房产标签：<van-tag plain type="primary" v-for="item in tags" :key="item">{{item}}</van-tag>
    </div>
    <van-swipe @change="onChange">
  <van-swipe-item v-for="item in photoArr" :key="item">
    <HouseImg :image="item"></HouseImg>
 </van-swipe-item>
  <template #indicator>
    <div class="custom-indicator">{{ current + 1 }}/{{photoArr.length}}</div>
  </template>
</van-swipe>房产介绍：<div class="content" v-html="house.content"></div>
<div class="houseMessage">
  <p>房产价格：{{house.price||999999}}元</p>
  <p>房产地址：{{house.address||'广州黑马程序员'}}</p>
  <p>房产经纪：{{house.agent?.name||'黑马程序员'}}</p>
  <p>房产经纪电话：{{house.agent?.phone||110}}</p>
  <p></p>
</div>
  </div>
</template>

<script>
import { houseDetail } from '@/api/house'
export default {
  name: 'HouseIndex',
  props: ['houseId'],
  data () {
    return {
      house: {},
      current: 0,
      photoArr: [],
      tags: []
    }
  },
  created () {
    // console.log(this.houseId)
    this.getHouseDetail()
  },
  mounted () {

  },

  methods: {
    onChange (index) {
      this.current = index
    },
    async getHouseDetail () {
      try {
        const res = await houseDetail(this.houseId)
        this.house = res
        this.house.content = this.house.content || '保利花园——和谐生活，自然舒适;香樟佑人，朱雀佑宅,您的家，花团锦簇，绿意悠然,您的家，花团锦簇，绿意悠然,您的家，花团锦簇，绿意悠然,您的家，花团锦簇，绿意悠然。您的家，花团锦簇，绿意悠然。您的家，花团锦簇，绿意悠然。您的家，花团锦簇，绿意悠然。您的家，花团锦簇，绿意悠然。'
        console.log(55, res)
        if (res.photos.length === 0) {
          this.photoArr = [
            'https://img2.baidu.com/it/u=2735063725,881898100&fm=253&fmt=auto&app=138&f=JPEG?w=648&h=500',
            'https://img2.baidu.com/it/u=856870240,1119802714&fm=253&fmt=auto&app=138&f=JPEG?w=525&h=350',
            'https://img2.baidu.com/it/u=15000127,961118077&fm=253&fmt=auto&app=138&f=JPEG?w=478&h=350',
            'https://img1.baidu.com/it/u=414122588,98260302&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=394'
          ]
        } else {
          this.photoArr = res.photos
        }
        if (res.tags.length === 0) {
          this.tags = ['学区房', '近地铁']
        } else {
          this.tags = res.tags
        }
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.house-deatil{
  padding: 0 10px;
    .custom-indicator {
    position: absolute;
    right: 5px;
    bottom: 5px;
    padding: 2px 5px;
    font-size: 12px;
    background: rgba(0, 0, 0, 0.1);
  }
  .content{
    text-indent: 1.5em;
  }
  .tags{
    margin-bottom: 8px;
    .van-tag{
      margin-right: 6px;
    }
  }
}
</style>
